<script setup>
import iconDown from "@/assets/img/products/badlands/down.png";
import iconDownW from "@/assets/img/products/badlands/down-white.png";
import bottom from "@/assets/img/products/badlands/bottom.png";

defineProps({
    image: {
        type: String,
        required: true,
    },
    title: {
        type: String,
        required: true,
    },
    description: {
        type: String,
        required: true,
    },
    action: {
        type: Object,
        color: String,
        route: String,
        label: String,
        default: () => ({
            color: "bg-gradient-success",
            label: "Find Out More",
        }),
    },
});
</script>
<template>
    <div class="card move-on-hover-s">
        <div class="card-body text-center">
            <h5 class="font-weight-bold">
                <a href="javascript:;" class="text-red ignore">{{ title }}</a>
            </h5>
            <img :src="iconDown" alt="" class="img-fluid icon-up" />
            <img :src="iconDownW" alt="" class="img-fluid icon-up-white" />
            <div class="text-center">
                <img class="img-fluid border-radius-lg tire" style="width: 100%" :src="image" :alt="title" />
            </div>
        </div>
        <div class="text-center bottom" style="background: #2b2b2b">
            <span class="text-white pt-2 text-f-Montserrat-Bold description uppercase">
                {{ description }}
            </span>
        </div>
    </div>
</template>
<style scoped>
.move-on-hover-s {
    transition: transform 0.3s ease, background 0.3s ease; /* 平滑过渡效果 */
    background: #fff;
    transform: scale(1); /* 默认大小 */
    overflow: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    will-change: transform, box-shadow;
    border: 6rem;
}
.move-on-hover-s .icon-up {
    display: inline;
}
.move-on-hover-s .icon-up-white {
    display: none;
}
.move-on-hover-s .bottom {
    display: none;
}
.move-on-hover-s .tire {
    margin-top: 1rem;
}

.move-on-hover-s:hover {
    transform: scale(1.1); /* 悬浮时放大1.1倍 */
    background: #ed1c24;
}
.move-on-hover-s:hover .icon-up {
    display: none;
}
.move-on-hover-s:hover .icon-up-white {
    display: inline;
}
.move-on-hover-s:hover .bottom {
    display: block;
}
.move-on-hover-s:hover .tire {
    width: calc(80% - 1rem) !important;
}
.move-on-hover-s:hover a {
    color: #fff !important;
}
.move-on-hover-s:hover .tire {
    /* margin-top: 1rem; */
}
.icon-up,
.icon-up-white {
    width: 26px;
    height: 20px;
}
.description {
    font-size: 1rem;
}
@media (max-width: 991.98px) {
    h5,
    .h5 {
        font-size: 0.9rem;
    }
    .icon-up,
    .icon-up-white {
        width: 18px;
        height: 14px;
    }
    .description {
        font-size: 0.9rem;
    }
}
</style>
